<template>
  <div class="BigBox">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" addable @tab-click="handleClick" @edit="oenIncreate"
      v-loading.fullscreen.lock="loadingfalg">
      <template #addIcon>
        <el-button style="margin: 10px;">新增月嫂</el-button>

      </template>
      <el-tab-pane label="全部月嫂" name="0">
        <div class="minbox">
          <div class="item" title="点击查看详情" v-for="(item, index) in matronList" key="item.id"
            @click="matronDetail(item.id)">
            <div class="delete-icon">
              <el-button title="删除月嫂" @click.stop="deleteMatron(item.id)" palin type="danger" :icon="Delete" circle />
            </div>
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="首席月嫂" name="1">
        <div class="minbox">
          <div class="item" title="点击查看详情" v-for="(item, index) in matronList" key="item.id"
            @click="matronDetail(item.id)">
            <div class="delete-icon">
              <el-button title="删除月嫂" @click.stop="deleteMatron(item.id)" palin type="danger" :icon="Delete" circle />
            </div>
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="金牌月嫂" name="2">
        <div class="minbox">
          <div class="item" v-for="(item, index) in matronList" key="item.id" @click="matronDetail(item.id)">
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="资深月嫂" name="3">
        <div class="minbox">
          <div class="item" v-for="(item, index) in matronList" key="item.id" @click="matronDetail(item.id)">
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="核心月嫂" name="4">
        <div class="minbox">
          <div class="item" v-for="(item, index) in matronList" key="item.id" @click="matronDetail(item.id)">
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="骨干月嫂" name="5">
        <div class="minbox">
          <div class="item" v-for="(item, index) in matronList" key="item.id" @click="matronDetail(item.id)">
            <div class="matron_img">
              <img src="@/assets/show.png" alt="" style="position: absolute;;" class="c_img">
              <img :src="item.image_default" alt="" class="c_img">
            </div>
            <div class="matron_text">
              <div class="colunm" style="display: flex;width: 60%;
                  align-items: center;">
                <text class="matron_name">{{ item.name }}</text>
                <text v-if="!item.serve_type" class="matron_type">休息</text>
                <text v-else class="matron_type" style="background-color: rgba(177, 89, 225, 0.9);">服务中</text>
              </div>
              <div class="colunm" style="width: 40%;">
                <div class="matron_price">￥{{ item.price }}</div>
              </div>
              <div class="colunm">
                <div class="matron_department">{{ item.department }}</div>
              </div>
              <div class="colunm">
                <div v-if="item.show_type" @click.stop="setMatronShow(item.id, item.show_type, index)" class="set_type">禁用
                </div>
                <div v-else class="set_type" @click.stop="setMatronShow(item.id, item.show_type, index)"
                  style="background-color: aquamarine;">启用</div>

              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

    </el-tabs>

    <!-- 分页 -->
    <div class="pagination"> <el-pagination background layout="prev, pager, next" v-model:current-page="page.page_num"
        v-model:page-size="page.page_size" :total="page.page_count * page.page_size" @current-change="currentChange" />
    </div>

  </div>
  <el-dialog :title="ptitle" v-model="dialogfalg" width="480px" align-center append-to-body :before-close="handleClose">
    <div class="detail_box">
      <div class="img_box">
        <img v-if="!input_type" src="@/assets/show.png" alt="" style="position: absolute;" class="m_img">
        <img v-if="!input_type" :src="detailList.head_list.default_img" alt="" class="m_img">
        <el-upload v-else class="m_img" :action="host" :show-file-list="false" :on-success="defaultImgSuccess">
          <img v-if="detailList.head_list.default_img" :src="detailList.head_list.default_img" class="m_img" />
          <el-icon v-else class="m_img">
            <Plus />
          </el-icon>
        </el-upload>
      </div>


      <el-form class="price_text" :model="detailList.head_list">
        <div class="price_row">

          <div class="price">价格:￥<el-input v-if="input_type" style="width: 65px;"
              v-model="detailList.head_list.price"></el-input> <span v-else>{{ detailList.head_list.price }}</span></div>
        </div>
        <div class="price_row">
          <div class="earnest">定金:￥<el-input v-if="input_type" style="width: 65px;"
              v-model="detailList.head_list.earnest"></el-input> <span v-else>{{ detailList.head_list.earnest }}</span>
          </div>
        </div>
      </el-form>

      <div class="title">我的记录</div>
      <div class="record">
        <div class="record_row">

          <div class="date_num">服务过
            <el-input v-if="input_type" style="width: 65px;" v-model="detailList.head_list.serve_num"></el-input>
            <span v-else>{{ detailList.head_list.serve_num }}</span>
            位宝妈
          </div>
        </div>
        <div class="record_row">
          <div class="date_num">服务时长
            <el-input v-if="input_type" style="width: 65px;" v-model="detailList.head_list.serve_date"></el-input>
            <span v-else>{{ detailList.head_list.serve_date }}</span>
            天
          </div>
        </div>
      </div>
      <!-- ----------------- -->
      <div class="title">相关证书</div>
      <div class="cretificate">
        <div class="cretificate_row">
          <div class="cretificate_title">健康证</div>
          <el-upload v-if="input_type" v-model:file-list="detailList.certificate_list[0]" :action="host"
            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
            :on-success="handsuccess">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <div v-else class="cretificate_img">
            <div class="img_box" v-for="item in detailList.certificate_list[0]" key="item.id">
              <el-image class="c_img" style="width: 100%;height: 100%;" fit="cover" :src="item.url"
                :preview-src-list="previewList(detailList.certificate_list[0])"></el-image>
            </div>
          </div>
        </div>
        <div class="cretificate_row">
          <div class="cretificate_title">体检表</div>
          <el-upload v-if="input_type" v-model:file-list="detailList.certificate_list[1]" :action="host"
            list-type="picture-card" :on-preview="handlePictureCardPreview2" :on-remove="handleRemove2"
            :on-success="handsuccess2">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <div v-else class="cretificate_img">
            <div class="img_box" v-for="item in detailList.certificate_list[1]" key="item.id">
              <el-image class="c_img" style="width: 100%;height: 100%;" fit="cover" :src="item.url"
                :preview-src-list="previewList(detailList.certificate_list[1])"></el-image>
            </div>
          </div>
        </div>
        <div class="cretificate_row">
          <div class="cretificate_title">育婴证书</div>
          <el-upload v-if="input_type" v-model:file-list="detailList.certificate_list[2]" :action="host"
            list-type="picture-card" :on-preview="handlePictureCardPreview3" :on-remove="handleRemove3"
            :on-success="handsuccess3">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <div v-else class="cretificate_img">
            <div class="img_box" v-for="item in detailList.certificate_list[2]" key="item.id">
              <el-image class="c_img" style="width: 100%;height: 100%;" fit="cover" :src="item.url"
                :preview-src-list="previewList(detailList.certificate_list[2])"></el-image>
            </div>
          </div>
        </div>

      </div>


      <div class="title">基本信息</div>
      <div class="basic_info">
        <div class="matron_info">
          <div  v-if="increase_flag" class="info_row">
            <div class="column_1">月嫂等级</div>
            <el-select style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.level_id" placeholder="月嫂等级">
              <el-option v-for="item in levelOptions" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>

          </div>
          <div class="info_row">
            <div class="column_1">姓名</div>

            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.name"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.name }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">年龄</div>

            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.age"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.age }}</div>
          </div>

          <div class="info_row">
            <div class="column_1">民族</div>
            <el-select v-if="input_type" style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.nation"
              placeholder="民族">
              <el-option v-for="item in nationOption" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <div v-else class="column_2">{{ detailList.basic_list.nation }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">婚姻状况</div>
            <el-select v-if="input_type" style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.marriage"
              placeholder="婚姻状况">
              <el-option v-for="item in marriageOption" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <div v-else class="column_2">{{ detailList.basic_list.marriage }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">属相</div>
            <el-select v-if="input_type" style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.zodiac"
              placeholder="属相">
              <el-option v-for="item in zodiacOption" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <div v-else class="column_2">{{ detailList.basic_list.zodiac }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">星座</div>
            <el-select v-if="input_type" style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.startsign"
              placeholder="星座">
              <el-option v-for="item in startsignOption" :key="item.label" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <div v-else class="column_2">{{ detailList.basic_list.startsign }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">身高</div>
            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.height"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.height }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">体重</div>
            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.weight"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.weight }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">所属门店</div>
            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.department"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.department }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">户籍地址</div>
            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.domicile"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.domicile }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">常住地址</div>
            <el-input v-if="input_type" style="width: 150px; flex-grow: 5;"
              v-model="detailList.basic_list.permanent"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.permanent }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">培训评价</div>
            <el-input v-if="input_type" type="textarea" :autosize="{ minRows: 3, maxRows: 15 }"
              style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.training"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.training }}</div>
          </div>
          <div class="info_row">
            <div class="column_1">综合评价</div>
            <el-input v-if="input_type" type="textarea" :autosize="{ minRows: 3, maxRows: 15 }"
              style="width: 150px; flex-grow: 5;" v-model="detailList.basic_list.synthesis"></el-input>
            <div v-else class="column_2">{{ detailList.basic_list.synthesis }}</div>
          </div>
        </div>

      </div>

      <div class="title">工作经历</div>
      <div class="work_info">
        <el-table stripe :data="detailList.work_list" style="width: 430px" empty-text="无数据" v-if="input_type">
          <el-table-column prop="date" label="日期" width="200" />
          <el-table-column prop="work" label="职位" width="120" />
          <el-table-column prop="pay" label="薪资" />
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button v-if="input_type" style="width: 90%;margin: 5px 0px;" @click="addwork">添加</el-button>
        <el-table v-else style="width: 430px" :data="detailList.work_list" table-layout="fixed" empty-text="无数据">
          <el-table-column prop="date" label="日期" width="200" />
          <el-table-column prop="work" label="职位" width="150" />
          <el-table-column prop="pay" label="薪资" />

        </el-table>

      </div>

      <div class="title">家庭成员</div>
      <div class="family_info">
        <el-table stripe :data="detailList.family_list" style="width: 430px" v-if="input_type" empty-text="无数据">
          <el-table-column prop="name" label="姓名" width="80" />
          <el-table-column prop="relations" label="关系" width="80" />
          <el-table-column prop="unit" label="单位" width="180" />
          <el-table-column prop="job" label="职务" />
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="family_deleteRow(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>


        </el-table>
        <el-button style="width: 90%;margin: 5px 0px;" @click="openFamily" v-if="input_type">添加</el-button>
        <el-table v-else empty-text="无数据" stripe :data="detailList.family_list" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="80" />
          <el-table-column prop="relations" label="关系" width="80" />
          <el-table-column prop="unit" label="单位" width="180" />
          <el-table-column prop="job" label="职务" />

        </el-table>
      </div>

      <div class="title">作品展示</div>
      <div class="display_info">
        <el-upload v-if="input_type" v-model:file-list="detailList.display_list" :action="host" list-type="picture-card"
          :on-preview="handlePictureCardPreview4" :on-remove="handleRemove4" :on-success="handsuccess4">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <div v-else class="cretificate_img">
          <div class="img_box" v-for="item in detailList.display_list" key="item.id">
            <el-image class="c_img" style="width: 100%;height: 100%;" fit="cover" :src="item.url"
              :preview-src-list="previewList(detailList.display_list)"></el-image>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
      </div>

    </div>

    <div class="alter-footer">
      <el-button v-if="input_type && !increase_flag" @click="input_type = false">取 消</el-button>
      <el-button v-if="!increase_flag" type="primary" @click="umatronDetail">{{ input_type ? '确 定' : '修改资料' }}</el-button>
    </div>
    <div v-if="increase_flag" class="increase-footer">
      <el-button @click="dialogfalg = false; increase_flag = false; input_type = false">取 消</el-button>
      <el-button type="primary" @click="increaseMatron">上 传</el-button>
    </div>
    <el-dialog v-model="work_dialog" width="500" title="新增工作经历" align-center>
      <el-form :model="add_work" :rules="work_rules">
        <el-form-item label="日期" prop="date1">
          <el-col :span="11">
            <el-date-picker v-model="add_work.date1" type="date" placeholder="开始日期" style="width: 100%" />
          </el-col>
          <el-col :span="11">
            <el-date-picker v-model="add_work.date2" type="date" placeholder="结束日期" style="width: 100%" />
          </el-col>
        </el-form-item>

        <el-form-item label="职务" prop="work">
          <el-input v-model="add_work.work" />
        </el-form-item>
        <el-form-item label="薪资" prop="pay">
          <el-input v-model="add_work.pay" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="work_dialog = false">取 消</el-button>
        <el-button type="primary" @click="AddWork">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog v-model="family_dialog" width="500" title="新增家庭关系" align-center>
      <el-form :model="familyData" :rules="family_rules">


        <el-form-item label="姓名" prop="name">
          <el-input v-model="familyData.name" />
        </el-form-item>
        <el-form-item label="关系" prop="relations">
          <el-input v-model="familyData.relations" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="familyData.unit" />
        </el-form-item>
        <el-form-item label="职务" prop="job">
          <el-input v-model="familyData.job" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="work_dialog = false">取 消</el-button>
        <el-button type="primary" @click="addfamily">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
import {
  Delete,
} from '@element-plus/icons-vue'
import { getMatronList, getMatronDetail, increaseMatronDetail, setMatronType, alterMatronDetail, deleteMatronapi } from '@/api/matron.js'
const levelOptions = ref([
  {
    label: '首席月嫂',
    value: 1
  },
  {
    label: '金牌月嫂',
    value: 2
  },
  {
    label: '资深月嫂',
    value: 3
  },
  {
    label: '核心月嫂',
    value: 4
  },
  {
    label: '骨干月嫂',
    value: 5
  },
])
const nationOption = ref(["汉族", "壮族","满族","回族","苗族","维吾尔族","土家族","彝族","蒙古族","藏族","布依族","侗族","瑶族","朝鲜族","白族","哈尼族","哈萨克族","黎族","傣族","畲族","傈僳族","仡佬族","东乡族","高山族","拉祜族","水族","佤族","纳西族","羌族","土族","仫佬族","锡伯族","柯尔克孜族","达斡尔族","景颇族","毛南族","撒拉族","布朗族","塔吉克族","阿昌族","普米族","鄂温克族","怒族","京族","基诺族","德昂族","保安族","俄罗斯族","裕固族","乌孜别克族","门巴族","鄂伦春族","独龙族","塔塔尔族","赫哲族","珞巴族"].map(item=>{return {label:item ,value:item}}))
const marriageOption = ref([
  {
    label: '已婚',
    value: '已婚',
  },
  {
    label: '未婚',
    value: '未婚',
  },
  {
    label: '离异',
    value: '离异',
  },
])
const startsignOption = ref([
  // 白羊座、金牛座、双子座、巨蟹座、狮子座、处女座、天秤座、天蝎座、射手座、摩羯座、水瓶座、双鱼座
  {
    label: '白羊座',
    value: '白羊座'
  },
  {
    label: '金牛座',
    value: '金牛座'
  },
  {
    label: '双子座',
    value: '双子座'
  }
  ,
  {
    label: '巨蟹座',
    value: '巨蟹座'
  },
  {
    label: '狮子座',
    value: '狮子座'
  },
  {
    label: '处女座',
    value: '处女座'
  },
  {
    label: '天秤座',
    value: '天秤座'
  }
  ,
  {
    label: '天蝎座',
    value: '天蝎座'
  }
  ,
  {
    label: '射手座',
    value: '射手座'
  }
  ,
  {
    label: '摩羯座',
    value: '摩羯座'
  }
  ,
  {
    label: '水瓶座',
    value: '水瓶座'
  }
  ,
  {
    label: '双鱼座',
    value: '双鱼座'
  }
])
const zodiacOption = ref([
  // 鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪
  {
    label: '鼠',
    value: '鼠'
  },
  {
    label: '牛',
    value: '牛'
  },
  {
    label: '虎',
    value: '虎'
  },
  {
    label: '兔',
    value: '兔'
  },
  {
    label: '龙',
    value: '龙'
  },
  {
    label: '蛇',
    value: '蛇'
  },
  {
    label: '马',
    value: '马'
  },
  {
    label: '羊',
    value: '羊'
  },
  {
    label: '猴',
    value: '猴'
  },
  {
    label: '狗',
    value: '狗'
  },
  {
    label: '鸡',
    value: '鸡'
  },
  {
    label: '猪',
    value: '猪'
  },
])
const setMatronShow = async (id, type, index) => {
  console.log('click', id, { matron_id: id, type: type ? 0 : 1 })
  const res = await setMatronType({ matron_id: id, type: type ? 0 : 1 })
  if (res.code == 200) {
    console.log(matronList.value[index])
    matronList.value[index].show_type = type ? 0 : 1
    ElMessage.success('修改成功')
  }
  else{
    ElMessage.error('修改失败')
  }
}
const oenIncreate = () => {
  detailList.value = {
    'head_list': {
      'default_img': '',
      'serve_date': '',
      'serve_num': '',
      'price': '',
      'earnest': ''
    },
    'certificate_list': [
      [], [
      ], [
      ]],
    'basic_list': {
      'name': '',
      'level_id': '',
      'age': '',
      'nation': '',
      'home_type': '',
      'education': '',
      'marriage': '',
      'id_card': '',
      'zodiac': '',
      'startsign': '',
      'height': '',
      'weight': '',
      'department': '',
      'domicile': '',
      'permanent': '',
      'training': '',
      'synthesis': '',
    },

    'family_list': [



    ],

    'work_list': [


    ],

    'display_list': [],

  }
  input_type.value = true
  dialogfalg.value = true
  increase_flag.value = true
}
const increaseMatron = async () => {
  console.log('新增月嫂')
  console.log(detailList.value)
  const res = await increaseMatronDetail(detailList.value)
  console.log('increase', res)
  if (res.code == 200 || res.code == 0) ElMessage.success('新增成功');
  else ElMessage.error('新增失败')
  increase_flag.value = false
  dialogfalg.value = false
  input_type.value = false
}
const increase_flag = ref(false)
const defaultImgSuccess = (res) => {
  if (res.code == 200) {
    detailList.value.head_list.default_img = 'http://132.232.132.248:8880/' + res.url
console.log(detailList);

  }

}
const umatronDetail = async () => {
  if (input_type.value == false) input_type.value = true;
  else {
    console.log('修改月嫂')
    console.log(detailList.value)
    const res = await alterMatronDetail(detailList.value)
    console.log('alter', res)
    if (res.code == 200 || res.code == 0) ElMessage.success('修改成功');
    else ElMessage.error('修改失败')
    increase_flag.value = false
    dialogfalg.value = false
    input_type.value = false
  }

}
const deleteMatron = async (id) => {
  console.log('delete', id);
  const res = await deleteMatronapi({ matron_id: id })
  console.log('deleteres', res);

}
const family_dialog = ref(false)
const AddWork = () => {
  console.log(add_work.value)
  detailList.value.work_list.push({
    date: add_work.value.date1.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-') + ' ~ ' + add_work.value.date2.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-'),
    pay: add_work.value.pay,
    work: add_work.value.work
  })
  console.log(detailList.value.work_list)
  work_dialog.value = false
}
const addfamily = () => {
  console.log(familyData.value)
  detailList.value.family_list.push({
    job: familyData.value.job,
    name: familyData.value.name,
    relations: familyData.value.relations,
    unit: familyData.value.unit


  })
  console.log(detailList.value.family_list)
  family_dialog.value = false
}
const work_dialog = ref(false)
const add_work = ref({
  date1: '',
  date2: '',
  date: '',
  work: '',
  pay: ''
})
const familyData = ref({
  job: '',
  name: '',
  relations: '',
  unit: ''
})
const work_rules = reactive({
  work: [
    { required: true, message: '请输入职务', trigger: 'blur' }
  ],
  pay: [
    { required: true, message: '请输入薪资', trigger: 'blur' }
  ],
  date1: [
    { required: true, message: '请选择日期', trigger: 'blur' }
  ]
})
const family_rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  relations: [
    { required: true, message: '请输入关系', trigger: 'blur' }
  ],
  job: [
    { required: true, message: '请输入职务', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ]
})
const deleteRow = (index) => {
  console.log('ciclk', index)
  detailList.value.work_list.splice(index, 1)
  console.log(detailList.value.work_list)
}
const family_deleteRow = (index) => {
  console.log('ciclk', index)
  detailList.value.family_list.splice(index, 1)
  console.log(detailList.value.family_list)
}
const addwork = () => {
  console.log('新增工作')
  work_dialog.value = true
}
const openFamily = () => {
  console.log('新增关系')
  family_dialog.value = true
}

const host = ref('http://132.232.132.248:9200/api/admin/image/')
const input_type = ref(false)


const detailList = ref({})
const ptitle = computed(() => {
  if (increase_flag.value) {
    return '新增月嫂'
  }
  return input_type.value ? "修改月嫂" : "月嫂详情"
})
const handleClose = (done) => {
  input_type.value = false;
  increase_flag.value = false
  dialogfalg.value = false
  console.log('close');
  
  // done()
}
const loadingfalg = ref(false)
const dialogfalg = ref(false)
const matronDetail = async (id) => {

  console.log(id)
  loadingfalg.value = true
  const res = await getMatronDetail({ matron_id: id })
  detailList.value = res.data
  loadingfalg.value = false
  console.log('detail', detailList.value)

  dialogfalg.value = true
}
const matronList = ref([
])
const page = ref({
  page_num: "1",
  page_size: 12,
  page_count: 1,
  level_id: '0'
})
const activeName = ref('0')

const currentChange = async (num) => {
  page.value.page_num = num
  loadingfalg.value = true
  const res = await getMatronList(page.value)
  matronList.value = res.data.list
  page.value.page_count = res.data.count
  loadingfalg.value = false
}
const handleClick = async (tab = false, event) => {
  if (tab) {
    page.value.level_id = tab.props.name
  }
  loadingfalg.value = true
  const res = await getMatronList(page.value)
  matronList.value = res.data.list
  page.value.page_count = res.data.count
  loadingfalg.value = false
}
handleClick()


const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailList.value.certificate_list[0])
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true

}
const handsuccess = (response, uploadFile, uploadFiles) => {
  console.log('ok', response, uploadFile, uploadFiles)
  detailList.value.certificate_list[0].pop()
  detailList.value.certificate_list[0].push({ id: response.id, url: 'http://132.232.132.248:8880/' + response.url })
  console.log(detailList.value)
}
const handleRemove2 = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailList.value.certificate_list[1])
}

const handlePictureCardPreview2 = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  console.log(detailList.value.certificate_list[1])
}
const handsuccess2 = (response, uploadFile, uploadFiles) => {
  console.log('ok', response, uploadFile, uploadFiles)
  detailList.value.certificate_list[1].pop()
  detailList.value.certificate_list[1].push({ id: response.id, url: 'http://132.232.132.248:8880/' + response.url })
  console.log(detailList.value.certificate_list[1])
}
const handleRemove3 = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailList.value.certificate_list[2])
}

const handlePictureCardPreview3 = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  console.log(detailList.value.certificate_list[2])
}
const handsuccess3 = (response, uploadFile, uploadFiles) => {
  console.log('ok', response, uploadFile, uploadFiles)
  detailList.value.certificate_list[2].pop()
  detailList.value.certificate_list[2].push({ id: response.id, url: 'http://132.232.132.248:8880/' + response.url })
  console.log(detailList.value.certificate_list[2])
}
const handleRemove4 = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailList.value.display_list)
}

const handlePictureCardPreview4 = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  console.log(detailList.value.display_list)
}
const handsuccess4 = (response, uploadFile, uploadFiles) => {
  console.log('ok', response, uploadFile, uploadFiles)
  detailList.value.display_list.pop()
  detailList.value.display_list.push({ id: response.id, url: 'http://132.232.132.248:8880/' + response.url })
  console.log(detailList.value.display_list)
}
//预览图列表计算
const previewList = computed(() => (arr) => {
  const res_arr = []
  for (let i = 0; i < arr.length; i++) {
    res_arr.push(arr[i].url)
  }
  return res_arr
})
</script>

<style lang="scss">
* {
  user-select: none;
}

.family_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.display_info {
  width: 100%;

  .cretificate_img {
    display: flex;
    flex-wrap: wrap;

    .img_box {
      margin: 5px;
      width: 180px;
      height: 180px;
      border-radius: 5px;
      overflow: hidden;
    }
  }
}

.work_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.basic_info {
  width: 100%;

  .matron_info {

    margin: 10px;
    border: 0.5px solid rgba(0, 0, 0, 0.3);
    font-size: 17px;

    .info_row {
      --pd: 4px;
      display: flex;
      align-items: stretch;

      border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);

      .column_1 {
        width: 35%;
        height: auto;
        text-align: center;
        padding: var(--pd) 0px;

        border-right: 0.5px solid rgba(0, 0, 0, 0.3);
      }

      .column_2 {
        width: 65%;

        text-align: left;
        padding: var(--pd) 10px;

        text-wrap: wrap;
      }
    }
  }
}

.cretificate {
  width: 100%;

  .cretificate_row {
    margin: 10px 20px;

    .cretificate_title {
      color: rgba(21, 147, 231, 0.7);
      font-size: 14px;
    }

    .cretificate_img {
      display: flex;
      flex-wrap: wrap;

      .img_box {
        margin: 5px;
        width: 180px;
        height: 180px;
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
}

.minbox {
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;

  .item {
    position: relative;
    width: 180px;
    margin: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);

    .delete-icon {
      opacity: 0;
      display: flex;
      position: absolute;
      top: -10px;
      right: -10px;
      z-index: 999;
      zoom: 0;
      transition: 0.4s;
    }

    &:hover {
      .delete-icon {
        opacity: 1;
        zoom: 1;

      }
    }

    .matron_img {
      position: relative;
      width: 100%;

      .c_img {
        width: 100%;
        height: 180px;
      }
    }

    .matron_text {
      display: flex;
      flex-wrap: wrap;
      margin: 0px 0px 5px 0px;
      color: rgba(0, 0, 0, 0.8);

      .colunm {
        position: relative;
        width: 50%;
        font-size: 15px;
        font-weight: 300;
        margin: 4px 0px;

        div {
          margin: 0px 3px;
        }

        text {
          margin: 0px 3px;
        }
      }

      .matron_name {
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;

      }

      .matron_type {
        height: 12px;
        padding: 3px 5px;
        font-size: 10px;
        color: #fff;
        border-radius: 3px;
        background-color: #6b778c;

      }

      .matron_price {

        color: rgba(221, 13, 13, 0.9);
        font-weight: 345;
        text-align: right;

      }

      .matron_department {
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
        font-weight: 350;
      }

      .set_type {
        position: absolute;
        padding: 2px 9px;
        margin: 5px 0px;
        right: 0px;
        color: #fff;
        user-select: none;
        font-size: 13px;
        border-radius: 4px;
        background-color: rgba(221, 13, 13, 0.9);
      }
    }
  }
}

.demo-tabs>.el-tabs__content {

  overflow: visible;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs {
  margin: 0 20px;
}

.BigBox {
  position: relative;

  .button1 {
    user-select: none;
    z-index: 999;
    position: absolute;
    text-align: right;
    margin: 10px;
    right: 5px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(55, 173, 252, 0.9);

    &:hover {
      font-weight: 500;
      border-bottom: 1px solid rgba(55, 173, 252, 0.9);
    }
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 20rem;
  border: 1px solid rgb(164, 154, 154);
}

.detail_box {
  width: 450px;
  height: 650px;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;

  &::-webkit-scrollbar {
    width: 15px;
  }

  .img_box {
    position: relative;

    .m_img {
      width: 430px;
      height: 430px;

    }
  }

  .price_text {
    width: 400px;
    display: flex;

    .price_row {
      display: flex;
      justify-content: center;
      align-items: baseline;
      width: 50%;
    }
  }

  .title {
    width: 100%;
    color: rgba(21, 147, 231, 0.9);
    text-align: left;
  }

  .record {
    width: 100%;
    display: flex;

    .record_row {
      text-align: center;
      width: 50%;
    }
  }
}

.alter-footer {
  display: flex;
  justify-content: flex-end;
  margin: 10px;

}

.increase-footer {
  display: flex;
  justify-content: flex-end;
  margin: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 40px 0px;
}
</style>
